<template>
  <div id="category">
    <div>
      <div @click="$router.push('/HomePage')">Home Page</div>
      <hr color="#ffcb00"/>
    </div>
    <div>
      <div @click="$router.push('/Photo')">Photo</div>
      <hr color="#3e8084"/>
    </div>
    <div>
      <div @click="$router.push('/PersonalSharing')">Personal Sharing</div>
      <hr color="#ffa4be"/>
    </div>
    <div>
      <div @click="$router.push('/LearningSharing')">Learning Sharing</div>
      <hr color="#ffcb00"/>
    </div>
    <div>
      <div @click="$router.push('/MessageBoard')">Message Board</div>
      <hr color="#3e8084"/>
    </div>
  </div>
</template>

<script>
export default {
  name: "catagory"
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;500&display=swap');
#category{
  display: flex;
  width: 1000px;
  margin-top: 50px;
  margin-right: 200px;
  justify-content: space-around;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  margin-left: 400px;
}
</style>
